<template>
  <div class="qun-list">
    <div class="readcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>申请列表</el-breadcrumb-item>
      </el-breadcrumb>
    </div>


    <el-table :data="list" style="width: 100%">
      <el-table-column prop="title" label="标题" width="180">
      </el-table-column>
      <el-table-column prop="funds" label="经费(元)" width="180">
      </el-table-column>
      <el-table-column prop="department" label="部门" width="180">
      </el-table-column>
      <el-table-column label="操作">
        <template scope="scope">
          <el-button @click="fundsEdit(scope.row.id)" type="text" size="small" >编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="10"
            layout="total, prev, pager, next"
            :total="count">
    </el-pagination>
  </div>
</template>

<script>
  import {fundsList} from '@/api';

  export default {
    name: 'fundsList',
    data () {
      return {
        currentPage: 1,
        count: 2,
        loading: true,
        // 经费列表
        list: [
          {
            title: '产品研发科研经费',
            funds: 22000,
            department: '研发部'
          },
          {
            title: '市场宣传经费',
            funds: 35000,
            department: '市场部'
          }
        ]
      };
    },

    mounted () {
      this.$nextTick(function () {
        this.load(1); // 概况
      });
    },
    methods: {

      fundsEdit (id) {
        this.$router.push('/funds/edit/' + id);
      },
      fundsAdd () {
        this.$router.push('/funds/add');
      },

      // 概况数据获取
      load (page) {
        this.$http.get(fundsList, {
          params: {
            page: page
          }
        }).then(response => {
          this.loading = false;
          console.log(response.data);
          this.list = response.data.data.list;
          this.count = response.data.data.count;
        }, response => {
          this.$message.error('加载失败');
          console.log(response);
        });
      },
      handleSizeChange (val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange (val) {
        this.$router.push('/funds/list/' + val);
        this.load(val);
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.qun-list{padding:10px;}
</style>
